define(function(require) {

    'use strict';

    var Backbone = require('backbone'),
        $ = require('jquery'),
        Base = require('components/pop/base'),
        template = require('text!components/pop/templates/tag.html');

    var Utils = require('core/utils');

    return Base.extend({

        template: _.template(template),

        className: 'popover bottom',

        events: {
            'click .js-btn-cancel': 'hide',
            'click .js-btn-confirm': 'triggerCallback'
        },

        initialize: function(options) {
            Base.prototype.initialize.call(this, options);
            this.data = options.data;
        },

        render: function() {
            var view = this;
            view.$el.html(view.template(view.data));

            return view;
        },

        reset: function(obj) {
            var callback = obj.callback,
                target = obj.target,
                trigger = obj.trigger,
                data = obj.data;

            this.setCallback(callback);
            this.setTarget(target);
            this.setTrigger(trigger);
            this.setData(data);
            this.positioning();
            this.show();
        },

        setData: function(data) {
            this.data = _.extend(this.data, data);
            this.render();
        },

        positioning: function() {
            var view = this;

            view.$el.show().position({
                of: this.target,
                my: 'center top',
                at: 'center bottom',
                collision: 'none'
            });
        },

        triggerCallback: function() {
            var view = this;

            var text = $.trim($('.popover-tag input').val());

            view.callback(text);
            view.hide();
        }
    });
});